<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<th:block th:replace="tpl :: common_head()"></th:block>
		<title>权限编辑</title>
		<style>
			.table th, .table td{padding:0 16px 0 0;}
		</style>
	</head>
	<body th:with="entrance='/system/permission/index'">
		<th:block th:replace="tpl :: common_body(~{::.main-right})">
			<div class="main-right">
				<h1 class="main-right-h1">权限管理</h1>
				<ul class="main-right-tab">
				    <li><a href="index">权限列表</a></li>
				    <li class="selected" th:if="${domain==null}">新增域</li>
				    <li class="selected" th:if="${domain!=null}">编辑域</li>
				</ul>
				<form class="form" method="POST">
<fieldset>
	<legend>域信息</legend>
	<dl>
		<dt>域名称</dt>
		<dd>
			<input type="text" name="domain" th:value="${domain}" data-verify="required" />
		</dd>
	</dl>
</fieldset>
<fieldset>
	<legend>许可列表</legend>
	<table class="table">
		<colgroup><col width="300"><col width="300"><col width="100"></colgroup>
		<thead>
			<tr><td>许可名称</td><td>许可说明</td><td>操作</td></tr>
		</thead>
		<tbody>
			<tr th:each="permission,stat : ${permissions}" th:with="seq=${#ids.seq('')-1}">
			 	<td>
			 		<input type="hidden" th:name="'permissions['+${seq}+'].id'" th:value="${permission.id}" /> 
			 		<input type="text" th:name="'permissions['+${seq}+'].name'" th:value="${permission.name}" /> 
			 	</td>
				<td>
					<input type="text" th:name="'permissions['+${seq}+'].description'" th:value="${permission.description}" />
				</td>
				<td>
					<a class="delete">删除</a>
				</td>
			 </tr>
			 <tr id="addRow" style="cursor:pointer;"><td colspan="4" align="center">+&emsp;添加许可&emsp;+</td></tr>
		</tbody>
	</table>
</fieldset>
<input type="submit" value="保存修改" />
<input type="button" class="btn-delete" value="删&emsp;&emsp;除" th:if="${domain}" />
				</form>
			</div>
		</th:block>
		<script>
		$(function(){
			
			var index=[[${#ids.seq('')-1}]];
			var tpl=document.getElementById("menuTpl").innerHTML;
			
			$(".delete").click(function(){
				$(this).parents("tr").remove();
			});
			
			$("#addRow").click(function(){
				var targetHtml=tpl.replace(/INDEX/g,index++);
				$(targetHtml).insertBefore("#addRow").find(".delete").click(function(){
					$(this).parents("tr").remove();
				});
			});
		});
		</script>
		<script id="menuTpl" type="text/html">
		<tr>
		<td>
			<input type="text" name="permissions[INDEX].name" data-verify="required" /> 
		</td>
		<td>
			<input type="text" name="permissions[INDEX].description" data-verify="required" />
		</td>
		<td>
			<a>删除</a>
		</td>
		</tr>
		</script>
	</body>
</html>